import React, { Component } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom'
import homepage from '../css/Homepage.module.css'
import axios from 'axios'
export default class Homepage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: []
        }
    }
    product() {
        this.props.history.push('/product')
    }
    musical() {
        this.props.history.push('/musical')
    }
    componentWillMount() {
        let _this = this

        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/products',
            params: { per: 8, page: 1 }

        }).then(function (data) {
            console.log(data.data)

            _this.setState({
                list: data.data.products

            })
            console.log(data)

        })

    }
    render() {
        return (
           <BrowserRouter forceRefresh={true}>
            <div>
                <div className={homepage.brand}>
                    <div className={homepage.brandcenter}>
                        <h2>精选品牌</h2>
                    </div>
                </div>
                <div className={homepage.brandimg}>
                    <div className={homepage.brandimgcenter}>
                        <img src="http://image.fast.126net.cn/group2/M00/01/38/wKgBTFt1ciSAEnDrAAG7KBaSajU600.jpg" onClick={this.product.bind(this)} />
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1ceKAR_TOAACJPDACAqo627.jpg" onClick={this.product.bind(this)} />
                        <img src="http://image.fast.126net.cn/group2/M00/01/38/wKgBTFt1chiAM2H2AADRTDjyvlk088.jpg" onClick={this.product.bind(this)} />
                        <img src="http://image.fast.126net.cn/group2/M00/01/38/wKgBTFt1cg-ALAujAACCVZulRP0807.jpg" onClick={this.product.bind(this)} />
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1cdmARmtpAABiHxR9Lg8227.jpg" onClick={this.product.bind(this)} />
                    </div>
                </div>
                <div className={homepage.hot}>
                    <div className={homepage.hotcenter}>
                        <h2>热卖商品</h2>
                    </div>
                </div>
                <div className={homepage.hotsp}>
                    <div className={homepage.hotspcenter}>

                        {this.state.list.map(function (item, i) {
                          
                            return (
                                <div className={homepage.hotspimg} key={i}>
                                    <NavLink to={'/item/' + item._id} >

                                        <div className={homepage.bimg}>
                                            <img src={item.coverImg} />
                                        </div>
                                        <div className={homepage.hotspimgmony}>
                                            <p>销量：<b>{item.quantity}</b></p>
                                            <p>￥<em>{item.price}.00</em></p>
                                        </div>
                                        <div className={homepage.hotspdesc}>
                                            <p>{item.name}</p>
                                        </div>
                                    </NavLink>
                                </div>

                            )
                             
                        })}

                    </div>
                </div>
                <div className={homepage.music}>
                    <div className={homepage.musiccenter}>
                        <img src="http://image.fast.126net.cn/group1/M00/01/71/wKgBS1rRbaiAISy5AAKRWTRIkcQ089.jpg" onClick={this.musical.bind(this)} />
                    </div>
                </div>
                <div className={homepage.musicimg}>
                    <div className={homepage.musicimgcenter}>
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1cvOAILLNAACzIn9QxvM326.jpg" onClick={this.musical.bind(this)} />
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1cvOAILLNAACzIn9QxvM326.jpg" onClick={this.musical.bind(this)} />
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1cvOAILLNAACzIn9QxvM326.jpg" onClick={this.musical.bind(this)} />
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1cvOAILLNAACzIn9QxvM326.jpg" onClick={this.musical.bind(this)} />
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1cvOAILLNAACzIn9QxvM326.jpg" onClick={this.musical.bind(this)} />
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1cvOAILLNAACzIn9QxvM326.jpg" onClick={this.musical.bind(this)} />
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1cvOAILLNAACzIn9QxvM326.jpg" onClick={this.musical.bind(this)} />
                        <img src="http://image.fast.126net.cn/group1/M00/04/05/wKgBS1t1cvOAILLNAACzIn9QxvM326.jpg" onClick={this.musical.bind(this)} />
                    </div>
                </div>
            </div>
            </BrowserRouter>
        )
    }
    componentDidMount() {
        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/products',
            params: {}
        }).then(function (data) {
            console.log(data)
        })
    }
}